<template>
	<view class="page">
		<view class="searchBox">
			<view class="inputBox">
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.visitorForm.label1}}:
					</view>
					<view  class="val" >
						<u-input v-model="params.wbname" :placeholder="language.visitorForm.tip"></u-input>
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						{{language.visitorForm.label2}}:
					</view>
					<view  class="val" >
						{{language.visitorForm.val1}}
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.visitorForm.label3}}:
					</view>
					<view  class="val" >
						<u-input v-model="params.wbpaperNumber" :placeholder="language.visitorForm.tip"></u-input>
					</view>
				</view>
				<!-- <view class="inputRow" style="" >
					<view class="label">
						头像:
					</view>
					<view  class="val" >
						<u--image :showLoading="true" src="" width="90rpx" height="90rpx"></u--image>
					</view>
				</view> -->
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.visitorForm.label4}}:
					</view>
					<view class="val">
						<uni-datetime-picker type="datetime" v-model="params.willVisitTime" @change="changeWillVisitTime" :placeholder="language.visitorForm.tip2" />
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.visitorForm.label5}}:
					</view>
					<view class="val">
						<uni-datetime-picker type="datetime" v-model="params.willVisitEndTime" @change="changeWillVisitTime" :placeholder="language.visitorForm.tip2" />
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						{{language.visitorForm.label6}}:
					</view>
					<view  class="val" >
						<u-input v-model="params.wbcount" type="number" :placeholder="language.visitorForm.tip"></u-input>
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						{{language.visitorForm.label7}}:
					</view>
					<view  class="val" >
						<u-input v-model="params.wbplate"  :placeholder="language.visitorForm.tip"></u-input>
					</view>
				</view>
				<view class="inputRow" style="height: 200rpx;" >
					<view class="label">
						{{language.visitorForm.label8}}:
					</view>
						<u--textarea style="" v-model="params.visitDescription" :placeholder="language.visitorForm.tip" ></u--textarea>
				</view>
				<view class="inputRow" style="">
					<view class="label">
						<text class="red">*</text>
						{{language.visitorForm.label9}}:
					</view>
					<view  class="val" >
						<u-input v-model="params.personName"  :placeholder="language.visitorForm.tip"></u-input>
					</view>
				</view>
				<view class="inputRow" style="" >
					<text class="red">*</text>
					<view class="label">
						{{language.visitorForm.label10}}:
					</view>
					<view  class="val" >
						<!-- {{params.personDept ? params.personDept : ''}} -->
						<u-input v-model="params.personPhone" type="number" :placeholder="language.visitorForm.tip"></u-input>
					</view>
				</view>
				<view class="inputRow" style=""  v-if="isAudit==1">
					<view class="label">
						{{language.visitorForm.label11}}:
					</view>
					<view  class="val" >
						<u-radio-group
						   v-model="allow"
						   placement="row"
							 @change="groupChange"
						 >
						   <u-radio
						     :customStyle="{marginLeft: '8px'}"
						     :label="language.visitorForm.val2"
						     :name="1"
						     @change="radioChange">
						   </u-radio>
							<u-radio
								:customStyle="{marginLeft: '8px'}"
								:label="language.visitorForm.val3"
								:name="2"
								@change="radioChange">
							</u-radio>
						 </u-radio-group>
					</view>
				</view>
				<view class="inputRow" style="height: 320rpx;"  v-if="isAudit==1">
					<view class="label">
						{{language.visitorForm.label12}}:
					</view>
					<view  class="val" style="width: 80%;height: 300rpx; " >
						<u--textarea v-model="remark" :placeholder="language.visitorForm.tip"  ></u--textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="submitBtn"  @click="handleSubmit" v-if="isDetail !=1">
			{{language.visitorForm.submit}}
		</view>
		
		
			
	<!-- 
		<u-datetime-picker
		    :show="willVisitTimeShow" ref="datetimePicker" v-model="willVisitTime" 
		    mode="dateTime"  @cancel="willVisitTimeShow=false" @confirm="willVisitTimeConfirm"
		       ></u-datetime-picker> -->
		<!-- <u-datetime-picker
			:show="endDateShow" ref="datetimePicker" v-model="endDate" 
			mode="dateTime"  @cancel="endDateShow=false" @confirm="endDateConfirm"
	       ></u-datetime-picker> -->
	</view>
</template>

<script>
	import {ssVisitAppointmentAddApi,ssVisitAppointmentRefuseApi,ssVisitAppointmentAllowApi,ssVisitAppointmentListApi} from '@/common/api/commonApi/safeApi.js'
	import {getoaOpenInfoApi,} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				list:[],
				params:{
					personId :'',
					willVisitTime : '',
					willVisitEndTime: '',
					meetPersonId:'',
					personDept: '',
					personName: '',
					wbpaperType: 0,
				},
				willVisitTime: '',
				endDate: Number(new Date()),
				willVisitTimeShow : false,
				endDateShow : false,
				total : 0,
				isAudit: 2,
				isDetail: 2,
				allow: 1,
				remark : '',
				submiting:false,
				source: 1,//扫二维码就临时
				oaopenid: '',
				submited : false,
			}
		},
		components:{
		},
		methods: {
			changeWillVisitTime(e){
				console.log(e);
			},
			handleAllow(){
				let data = {
					id : this.params.id,
					allow: this.allow,
					remark :this.remark,
				}
				if(this.submiting) return
				this.submiting = true
				if(this.allow==1){
					ssVisitAppointmentAllowApi(data).then(res=>{
						this.setMessage('操作成功')
						setTimeout(()=>{
							this.goBack()
						},1000)
					}).finally(res=>{
						this.submiting = false
					})
				}else if(this.allow==2){
					ssVisitAppointmentRefuseApi(data).then(res=>{
						this.setMessage('操作成功')
						setTimeout(()=>{
							this.goBack()
						},1000)
					}).finally(res=>{
						this.submiting = false
					})
				}
				
			},
			handleSubmit(){
				if(this.submited) return this.setMessage('您已预约过了')
				if(this.isAudit==1) return this.handleAllow()
				if(!this.params.wbname) return this.setMessage('请输入姓名')
				if(!this.params.wbpaperNumber) return this.setMessage('请输入证件号码')
				if(!this.params.willVisitTime) return this.setMessage('请选择来访时间')
				if(!this.params.willVisitEndTime) return this.setMessage('请选择来访结束时间')
				if(!this.params.personName) return this.setMessage('请输入受访人姓名')
				if(!this.params.personPhone) return this.setMessage('请输入受访人手机')
				let data = this.params
				data.allow = 0
				data.source = this.source
				data.openid = uni.getStorageSync('openId')
				data.oaopenid = this.oaopenid
				
				if(this.submiting) return
				this.submiting = true
				ssVisitAppointmentAddApi(data).then(res=>{
						this.setMessage('预约成功！')
						this.submited = true
						setTimeout(()=>{
							this.goBack()
						},1000)
				}).finally(res=>{
					this.submiting = false
				})
			},
			handleDetail(item){
				this.goPage('/pages/componentsC/safe/accessRecordDetail',{id:1})
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.currPage ++
				this.getList()
			},
			willVisitTimeConfirm(e){
				console.log(e);
				let date = this.dateformat(e.value)
				this.params.willVisitTime = date
				console.log(this.params.willVisitTime);
				this.willVisitTimeShow = false
			},
			endDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.endDate = date
				this.endDateShow = false
			},
			getList(){
				ssVisitAppointmentListApi({id:this.id}).then(res=>{
					this.params = res.result.records[0]
					// this.params.meetPersonId_dictText = this.params.meetPersonId_dictText
				})
			},
		},
		onLoad({isAudit,isDetail,source,code,id}) {
			this.setPageTitle(this.language.visitorForm.title)
			if(source){
				this.source = source
			}
			if(code){
				console.log('code='+code);
				getoaOpenInfoApi({code}).then(res=>{
					this.oaopenid = res.result.oaopenid
					 uni.setStorageSync('oaopenid',res.result.oaopenid)
				})
			}
			if(id){
				this.id = id
				this.getList()
			}
			console.log(this.$Route.query);
			if(this.$Route.query.isAudit){
				this.isAudit = this.$Route.query.isAudit
				
			}
			if(this.$Route.query.isDetail){
				this.isDetail = this.$Route.query.isDetail
				console.log(this.isDetail);
			}
			if(this.$Route.query.rowDetail){
				console.log(this.$Route.query.rowDetail);
				let rowDetail = this.$Route.query.rowDetail
				this.params = rowDetail
				this.params.meetPersonId_dictText = rowDetail.meetPersonId_dictText
				console.log(this.params);
			}
			if(this.$Route.query.item){
				console.log(this.$Route.query.item);
				let item = this.$Route.query.item
				this.params.meetPersonId = item.id
				this.params.meetPersonId_dictText = item.name
				this.params.personDept = item.departmentId_dictText
				console.log(this.params);
			}
			// let info = uni.getStorageSync('selectInfoAccount')
			// this.getList()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
	
	.red{
		color: #f56c6c;
	}
.page{
	background-color: #f1f1f1;
	padding-bottom: 50rpx;
	// height: 100vh;
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding:  20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		// box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			// flex: 1;
			padding-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.inputRow{
				width: 100%;
				border-bottom: 1px solid #f1f1f1;
				height: 120rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				flex: 1;
				display: flex;
				align-items: center;
			}
			.text{
				margin: 0 20rpx;
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	
	.submitBtn{
		margin:  40rpx;
		// width: 110rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	
	.boxItem{
			background-color: #fff;
			margin: 20rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
			.row{
				margin: 10rpx;
				display: flex;
				.item{
					width: 50%;
					// flex: 1;
				}
				.label{
					color: #969696;
				}
				.val{
					color: #353535;
					font-size: 32rpx;
				}
				.btn{
						padding: 0 30rpx;
						width: 120rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #1890ff;
						border-radius: 8rpx;
						color: #fff;
				}
			}
		}
		
}
</style>
